import React, { Component } from "react";
import { Modal, Select, Input, Button, message } from "antd";
import "./index.css";

const Option = Select.Option;

export default class TransfPopup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      volume: "",
      from: "0", // 币币账户 0 , c2c 1, 保证金 2
      to: "1",
      allAssert: 0
    };
  }
  request = window.request;

  componentDidMount() {
    const { from } = this.state;
    this.getAllAssert(from);
  }

  handleCancel = () => {
    const { onCancel } = this.props;
    onCancel && onCancel();
  };

  handleOk = () => {
    const { from, to, volume } = this.state;
    if (from === to) {
      message.destroy();
      message.warn("账户不能相同");
      return;
    }
    if (volume * 1 === 0) {
      message.destroy();
      message.warn("划转数量要大于0");
      return;
    }

    this.transfer();
  };

  volumeChange = e => {
    let value = e.target.value;
    if (/^\d*\.{0,1}\d{0,8}$/.test(value) && value.length < 16) {
      this.setState({ volume: value });
    }
  };

  handleTranAll = () => {
    const { allAssert } = this.state;
    if (allAssert > 0) {
      this.setState({ volume: allAssert });
    }
  };

  //获取所有资产
  getAllAssert = from => {
    const { coinId } = this.props;

    if (from === "0") {
      //获取币币资产
      this.request(`/coin/volume/${coinId}`, {
        method: "GET"
      }).then(json => {
        if (json.code === 10000000) {
          if (json.data) {
            this.setState({ allAssert: json.data.volume });
          }
        } else {
          message.destroy();
          message.warn(json.msg);
        }
      });
    } else {
      // 获取c2c和保证金
      this.request(`/offline/volume/${coinId}`, {
        method: "GET"
      }).then(json => {
        if (json.code === 10000000) {
          if (json.data) {
            const { bailVolume, volume } = json.data;
            const myVolume = from === "1" ? volume : bailVolume;
            this.setState({ allAssert: myVolume });
          }
        } else {
          message.destroy();
          message.warn(json.msg);
        }
      });
    }
  };

  transfer = () => {
    const { coinId, symbol, onOK } = this.props;
    const { volume, from, to } = this.state;
    this.request(`/offline/volume/inOut`, {
      body: {
        coinId,
        symbol,
        volume,
        from,
        to
      }
    }).then(json => {
      if (json.code === 10000000) {
        message.success(json.msg);
        onOK && onOK();
      } else {
        message.destroy();
        message.warn(json.msg);
      }
    });
  };

  fromChange = value => {
    this.setState({ from: value });
    this.getAllAssert(value);
  };

  toChange = value => {
    this.setState({ to: value });
  };

  render() {
    const { from, to, volume, allAssert } = this.state;
    const { symbol } = this.props;
    return (
      <Modal
        title={
          <div>
            资产互转
            <span style={{ color: "#d4a668", fontSize: 20 }}> {symbol}</span>
          </div>
        }
        visible={true}
        wrapClassName="v-center-modal"
        width={500}
        footer={null}
        onCancel={this.handleCancel}
      >
        <div className="transf-popup">
          <div>
            <h4 className="tr-title">
              <span>从</span>
            </h4>
            <Select
              value={from}
              size="large"
              defaultValue="0"
              style={{ width: "100%" }}
              onChange={this.fromChange}
            >
              <Option value="0">币币账户</Option>
              <Option value="1">C2C账户</Option>
              <Option value="2">手续费预备金</Option>
            </Select>
          </div>
          <div className="to">
            <h4 className="tr-title">
              <span>转至</span>
            </h4>
            <Select
              value={to}
              size="large"
              defaultValue="0"
              style={{ width: "100%" }}
              onChange={this.toChange}
            >
              <Option value="0">币币账户</Option>
              <Option value="1">C2C账户</Option>
              <Option value="2">手续费预备金</Option>
            </Select>
          </div>
          <div className="volume">
            <h4 className="tr-title">
              <span>数量</span>
              <span>
                (可划转数量 : {allAssert} {symbol})
              </span>
            </h4>
            <div className="volume-input">
              <Input value={volume} size="large" onChange={this.volumeChange} />
              <span className="all" onClick={this.handleTranAll}>
                全部
              </span>
            </div>
          </div>
          <div className="footer-btn">
            <Button size="large" onClick={this.handleCancel}>
              取消
            </Button>
            <Button onClick={this.handleOk} type="primary" size="large">
              确认
            </Button>
          </div>
        </div>
      </Modal>
    );
  }
}
